
<div style="background-color: #f2f0e5;padding: 20px">
    <div style="width: 420px"></div>
    <form id="add_form" action="/filterCoffee" method="post">
        <select id="province" name="province" style="width: 100px;margin: 0px" onchange="loadCity(this);">
            <option value=""><%= __('orderForm').select %></option>
            <% datas.forEach(function(data,index){%>
            <option value="<%- data._id %>"><%- data.name %></option>
            <% }) %>
        </select>
        <select id="city" name="city" style="width: 100px;margin: 0px" onchange="loadArea(this)">
            <option value=""><%= __('orderForm').select %></option>
        </select>
        <select id="area" name="area" style="width: 100px;margin: 0px">
            <option value=""><%= __('orderForm').select %></option>
        </select>
        <input type="submit" value="<%= __('findPartner').screen%>" class="btn btn-warning" style="margin-left: 20px;">
    </form>
    <div id="coffeeData" style="background-color: white;padding: 20px;-moz-border-radius: 5px;-webkit-border-radius: 5px;height: 300px;overflow: auto">
        <% coffeeDatas.forEach(function(coffeeData,index){%>
            <div style="margin: 30px">
                <div style="width: 10%;float: left;margin-top: 10px">
                    <input type="radio" name="coffee" value="<%- coffeeData._id %>">
                </div>
                <div style="width: 65%;float: left">
                    <%- coffeeData.name %><br>
                    <% if(coffeeData.province.name!=coffeeData.city.name){%>
                    <%- coffeeData.province.name %>
                    <% } %>
                    <%- coffeeData.city.name%><%- coffeeData.area.name%><%- coffeeData.addr %><br>
                </div>
                <div  class="circular" style="width: 20%;float: left;background-color: #cacaca;padding: 5px;text-align: center">
                    <a href="/coffee?id=<%=coffeeData._id %>" target="_blank" style="color: #000000"><%= __('orderForm').p %></a>
                </div>
            </div>
            <div style="clear: both;"></div>
        <%})%>
        <div style="height: 50px"></div>
    </div>
    <div style="text-align: center;margin-top: 20px"><span style="width: 50px" class="btn btn-warning" onclick="dialogMessage()"><%= __('orderForm').ok %></span></div>
</div>


<script>
    $(function(){
        //提交表单
        $('#add_form').ajaxForm({
            success: showResponse //成功返回
        });
    });
    function dialogMessage(){
        var rs=document.getElementsByName('coffee');
        var coffeeId;
        if(!rs){
            return alert('当前没有数据');
        }else{
            for(var i=0;i<rs.length;i++){
                if(rs[i].checked){
                    coffeeId=$(rs[i]).val();
                }
            }
            if(!coffeeId){
                return alert('<%= __('orderForm').alert %>');
            }
        }
        //$.fancybox.close();
        $.fancybox({//调用fancybox弹出层
            'type':'ajax',
            'href':'/dialogMessage?calendarId=<%- _id %>&coffeeId='+coffeeId,
            padding:0
        });

    }
    function showResponse(result, statusText, xhr, $form){
        if(result!='1'){
            //$.fancybox.close();
            $('#coffeeData').html(result);
        }else{
            alert('数据加载失败，请稍后再试');
        }


    }
    function loadCity(obj){
        $.ajax({
            type: "get",
            url: "/loadCity?pid="+obj.value,
            success: function(result){
                $("#city").html(result);
            }
        });
    }
    function loadArea(obj){
        $.ajax({
            type: "get",
            url: "/loadArea?cid="+obj.value,
            success: function(result){
                $("#area").html(result);
            }
        });
    }
</script>